<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="common-layout"
    style="width: 100%; height: 100vh; background-color: #f2f2f2;box-sizing: border-box; padding: 20px; ">
    <el-container style="width: 100%;">
      <el-header>
        <el-row>
          <el-col :xs="24" :sm="24" :md="32" :lg="12" :xl="12">
            <div style="font-size: 28px; margin-bottom: 10px;">面试安排</div>
            <div style="color: #999;">管理和安排面试时间、候选人和面试官</div>
          </el-col>
          <el-col style="display: flex; justify-content: end;" :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <div>
              <el-icon style="color: #fff; position: relative; left: 30px; top: 3px; font-weight: 500;">
                <Plus />
              </el-icon>
              <el-button type="primary" icon="el-icon-plus" @click="">安排新面试</el-button>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <el-row
          style="width: 100%; height: 50px; font-size: 16px;color: #999; padding-left:10px ;border-bottom: 1px solid #f2f2f2; line-height: 50px; background-color: #Fff;">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">即将进行的面试</el-col>
        </el-row>
        <el-row>
          <el-table :data="tableData" style="width: 100%">

            <el-table-column label="日期时间" width="180">
              <template #default="scope">
                <div style="display: flex; align-items: center">
                  <el-icon>
                    <timer />
                  </el-icon>
                  <span style="margin-left: 10px">{{ scope.row.date }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="候选人" prop="name" width="180">

            </el-table-column>
            <el-table-column label="应聘职位" prop="name" width="180">

            </el-table-column>
            <el-table-column label="面试官" width="180">
              <template #default="scope">
                <el-popover effect="light" trigger="hover" placement="top" width="auto">
                  <template #default>
                    <div>name: {{ scope.row.name }}</div>
                    <div>address: {{ scope.row.address }}</div>
                  </template>
                  <template #reference>
                    <el-tag>{{ scope.row.name }}</el-tag>
                  </template>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="状态" width="180">
              <template #default="scope">
                <el-popover effect="light" trigger="hover" placement="top" width="auto">
                  <template #default>
                    <div>name: {{ scope.row.name }}</div>
                    <div>address: {{ scope.row.address }}</div>
                  </template>
                  <template #reference>
                    <el-tag>{{ scope.row.name }}</el-tag>
                  </template>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                  编辑
                </el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                  取消
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>

      </el-main>
    </el-container>
  </div>

</template>
<script lang='ts' setup>
import { Timer } from '@element-plus/icons-vue'

interface User {
  date: string
  name: string
  address: string
}

const handleEdit = (index: number, row: User) => {
  console.log(index, row)
}
const handleDelete = (index: number, row: User) => {
  console.log(index, row)
}

const tableData: User[] = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>
<style scoped>
::v-deep el-table-column {
  background-color: #ccc !important;
}
</style>
